<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>
        //js中的物体移动
        //'分享到'的演示
        //当鼠标移入分享到的span(实质div,因为span属于div中)时,显示巧克力色的div,移出则消失
        let timer = null;
        let isMoving = false;       //运动状态,如果在运动中则禁止其他鼠标移入移出的事件



        window.onload = function () {
            let oDiv = document.getElementById('div1');

            //鼠标移入
            oDiv.onmouseenter = function () {
                if (isMoving === false) {
                    isMoving = true;
                    timer = setInterval(function () {
                        if (oDiv.offsetLeft < 0) {
                            console.log('right');
                            oDiv.style.left = oDiv.offsetLeft+30+'px';
                        }else {
                            oDiv.style.left = 0+'px';
                            clearInterval(timer);
                            isMoving = false;
                        }
                    },30);
                }
            };

            //鼠标移出
            oDiv.onmouseleave = function () {
                if (isMoving === false) {
                    isMoving = true;
                    timer = setInterval(function () {
                        if (oDiv.offsetLeft > -180) {
                            console.log('left');
                            oDiv.style.left = oDiv.offsetLeft-30+'px';
                        }else {
                            oDiv.style.left = -180+'px';
                            clearInterval(timer);
                            isMoving = false;
                        }
                    },30);
                }z
            };

            //如果不添加isMoving而是通过div的位置来判断是否完成了移入移出也可以实现效果,且不会出现鼠标快速移出后div卡在那里不收进去的问题
            //但快速很多次后会出现移入移出事件无法执行的bug,原因未知,可能是多次快速移入移出后位置发生偏移,导致没有到检查点

        //可以选择制作这样的框架,有bug不想修复了
        function moveDiv(dest, timer, oDiv, speed = 30,rate = 30) {
            timer = setInterval(function () {
                if (dest === 0) {
                    console.log('to right'); //向右
                    if (oDiv.offsetLeft < dest) {
                        oDiv.style.left = oDiv.offsetLeft+speed+'px';
                    }else {
                        oDiv.style.left = dest+'px';
                        clearInterval(timer);
                        isMoving = false;
                    }
                }else {
                    console.log('to left'); //向左
                    if (oDiv.offsetLeft > dest) {
                        oDiv.style.left = oDiv.offsetLeft-speed+'px';
                    }else {
                        oDiv.style.left = dest+'px';
                        clearInterval(timer);
                        isMoving = false;
                    }
                }
            },rate);
        }
        }

    </script>
    <style>
        #div1 {
            background: bisque;
            height: 200px;
            width: 180px;
            position: absolute;     /*2个标签的位置都必须是绝对位置*/
            left: -180px;           /*让div的左边距缩进 -180,正好将自己的宽度width隐藏*/
        }

        #span1 {
            background: chocolate;
            position: absolute;
            height: 80px;
            width: 20px;
            line-height: 20px;      /*行高,不设置也行*/
            top: 30px;
            right: -20px;           /*因为span依附于div,本身span宽度为20,所以现在让右边距缩进20px正好等于左边与div重合*/
        }
    </style>
</head>

<body>

<div>
    <div id="div1">
        <span id="span1">分享到</span>
    </div>


</div>

</body>
</html>